<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery后台左侧伸缩菜单代码 - 站长素材</title>

    <style type="text/css">
        /* 以下实际使用若已初始化可删除 .nav height父级需逐级设置为100%*/

        body,
        html {
            height: 100%;
            background: #E2E2E2
        }

        body,
        ul {
            margin: 0;
            padding: 0
        }

        body {
            font: 14px "微软雅黑", "宋体", "Arial Narrow", HELVETICA;
            -webkit-text-size-adjust: 100%;
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
        }
        /* 以上实际使用若已初始化可删除 */

        #navn>div {
            display: inline-block;
            vertical-align: top;
        }
        /* nav */

        .nav-top {
            border-bottom: 1px solid rgba(255, 255, 255, .1);
        }

        .nav-top .nav-toptxt {
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            color: #fff;
            font-size: 30px;
            width: 60px;
            text-align: center;
            cursor: pointer;
        }

        .nav {
            width: 220px;
            height: 100%;
            background: #144B85;
            transition: all .3s;
            overflow: auto;
        }

        .nav a {
            display: block;
            overflow: hidden;
            padding-left: 20px;
            line-height: 46px;
            max-height: 46px;
            color: #fff;
            transition: all .3s;
        }

        .nav a span {
            margin-left: 30px;
        }

        .nav-item {
            position: relative;
        }

        .nav-item.nav-show {
            border-bottom: none;
        }

        .nav-item ul {
            display: none;
            background: rgba(0, 0, 0, .1);
        }

        .nav-item.nav-show ul {
            display: block;
        }

        .nav-item>a:before {
            content: "";
            position: absolute;
            left: 0px;
            width: 2px;
            height: 46px;
            background: #34A0CE;
            opacity: 0;
            transition: all .3s;
        }

        .nav .nav-icon {
            font-size: 20px;
            position: absolute;
            margin-left: -1px;
            top: 14px;
        }
        /* 此处修改导航图标 可自定义iconfont 替换*/

        .icon_1::after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            /*background: url(men1.png)no-repeat;*/
        }

        .nav-item:nth-child(1) .icon_1::after {
            background: url(leftimg/manager.png)no-repeat;
            background-size: 100% 100%;
        }

        .nav-item:nth-child(2) .icon_1::after {
            background: url(leftimg/user.png)no-repeat;
            background-size: 100% 100%;
        }

        .nav-more {
            float: right;
            margin-right: 20px;
            font-size: 12px;
            transition: transform .3s;
        }
        /* 此处为导航右侧箭头 如果自定义iconfont 也需要替换*/

        .nav-more::after {
            content: ">";
            color: #fff;
            font-style: normal;
            font-family: SimSun;
        }
        /*---------------------*/

        .nav-show .nav-more {
            transform: rotate(90deg);
        }

        .nav-show,
        .nav-item>a:hover {
            color: #2AF8CB;
        }

        .nav-show>a:before,
        .nav-item>a:hover:before {
            opacity: 1;
        }

        .nav-item li:hover a {
            color: #FFF;
            background: #3399FF;
        }
        /* nav-mini */

        .nav-mini.nav {
            width: 60px;
        }

        .nav-mini.nav .nav-icon {
            /* margin-left:-2px; */
        }

        .nav-mini.nav .nav-item>a span {
            display: none;
        }

        .nav-mini.nav .nav-more {
            margin-right: -20px;
        }

        .nav-mini.nav .nav-item ul {
            position: absolute;
            top: 0px;
            left: 60px;
            width: 180px;
            z-index: 99;
            background: #144B76;
            overflow: hidden;
        }

        .nav-mini.nav .nav-item:hover {
            background: rgba(255, 255, 255, .1);
        }

        .nav-mini.nav .nav-item:hover .nav-item a {
            color: #FFF;
        }

        .nav-mini.nav .nav-item:hover a:before {
            opacity: 1;
        }

        .nav-mini.nav .nav-item:hover ul {
            display: block;
        }

        li.act {
            background: #3399FF;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function() {
            let user=document.getElementById("user");
            let manager=document.getElementById("super");
            let camera=document.getElementById("camera");
            let search=document.getElementById("search");
            let users=document.getElementById("users");
            let manage=document.getElementById("manage");
            $.ajax({url:"trans",dataType:"json",success:function (resp) {
                    $(resp).each(function (index,element) {
                        let kind=element.user;
                        let username=element.username;
                        if (kind==="public") {
                            unuseful(manage);
                            $("#manage").css("color","grey");
                            user.setAttribute("href","/user/users?username="+username+"");
                            camera.setAttribute("href","/user/camera");
                        }
                        else{
                            $("#users").css("color","grey");
                            unuseful(users);
                            manager.setAttribute("href","/user/manager");
                            search.setAttribute("href","/user/mansel");
                        }
                    })
                }})
//				 nav收缩展开
            $('#aat').on('click','.nav-item>a',function(){
                if (!$('.nav').hasClass('nav-mini')) {
                    if ($(this).next().css('display') == "none") {
                        //展开未展开
                        $('.nav-item').children('ul').slideUp(300);
                        $(this).next('ul').slideDown(300);
                        $(this).parent('li').addClass('nav-show').siblings('li').removeClass('nav-show');
                    }else{
                        //收缩已展开
                        $(this).next('ul').slideUp(300);
                        $('.nav-item.nav-show').removeClass('nav-show');
                    }
                }
            });
//				 标志点击样式
            $('#aat').on('click','.nav-item>ul>li',function(){
                $(this).addClass("act").siblings().removeClass("act");
                $(this).parents(".nav-item").siblings().find(">ul>li").removeClass("act");
                console.log($(this).text())
            })
//				nav-mini切换
            $('#mini').on('click',function(){
                //≡的收缩
                if (!$('.nav').hasClass('nav-mini')) {
                    $('.nav-item.nav-show').removeClass('nav-show');
                    $('.nav-item').children('ul').removeAttr('style');
                    $('.nav').addClass('nav-mini');
                    $('.nav').css('overflow','visible');
                }else{
                    $('.nav').removeClass('nav-mini');
                    $('.nav').css('overflow','auto');
                }
            });
        });
        unuseful=function(dom){//使标签a无效
            dom.setAttribute("href","javascript:;")
            dom.setAttribute("target","")
        }
    </script>
</head>
<body>
<div class="nav">
    <div class="nav-top">
        <div id="mini" class="nav-toptxt">≡</div>
    </div>
    <ul id="aat">
        <li class="nav-item" >
            <a href="javascript:;" id="manage"><i class="my-icon nav-icon icon_1"></i><span>管理者</span></a>
            <ul>
                <li><a target="right" id="super"><span>添加用户信息</span></a></li>
                <li><a target="right" id="search"><span>信息查询</span></a></li>
            </ul>
        </li>
        <li class="nav-item" >
            <a href="javascript:;" id="users"><i class="my-icon nav-icon icon_1"></i><span>用户</span></a>
            <ul>
                <li><a  target="right" id="user"><span>信息登记</span></a></li>
                <li><a  target="right" id="camera"><span>信息查询</span></a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>